<template>
  <div class="mr-root">
    <!--<nav-header></nav-header>-->
    <back></back>
    <back-top></back-top>
    <div class="content">

      <span class="green" v-if="countent.top || countent.good">
            <span v-if="countent.top">置顶</span>
      <span v-if="!countent.top && countent.good">精华</span>
      </span>
      <span>发布：{{countent.create_at |lasttime}}</span>
      <span>来自：{{countent.tab | tabs}}</span>
      <span class="collect" @click="cla">
          <i class="fa" :class="this.class"></i>
          收藏
      </span>
      <!--<div class="user">
        <header>作者</header>
        <img :src="countent.author.avatar_url" alt="">
        <span>{{countent.author.loginname}}</span>
      </div>-->

      <div class="clear"></div>
      <h1 class="title">{{countent.title}}</h1>
      <div v-html="countent.content" class="countent"></div>
    </div>
    <div class="replies">
      <div class="replies-header">
        评论
      </div>
      <div v-for="(r,index) in countent.replies" :key="index" v-if="ke">
        <replies :rep="r">
          <span class="lou">{{index+1}}楼</span>
        </replies>
      </div>
      <new-replies v-if="bl"></new-replies>
      <p v-if="!ke" class="not">暂无评论</p>
    </div>
  </div>
</template>
<script>
  import NavHeader from '../components/NavHeader'
  import Back from '../components/Back'
  import Replies from '../components/Replies'
  import BackTop from '../components/BackTop'
  import NewReplies from '../components/NewReplies'
  export default {
    data() {
      return {
        class: "fa-star-o",
        k: true,
        ke: true,
        bl: false,
        countent: {},
        acc: {
          topic_id: "",
          accesstoken: ""
        }
      }
    },
    components: {
      NavHeader,
      Back,
      Replies,
      BackTop,
      NewReplies
    },
    methods: {
      cla() {
        if (this.bl) {
          this.k = !this.k
          if (this.k) {
            this.axios.post('http://www.vue-js.com/api/v1/topic/collect', this.acc)
              .then(data => {
                this.class = 'fa-star'
                //   console.log(data)
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            this.axios.post('http://www.vue-js.com/api/v1/topic/de_collect', this.acc)
              .then(data => {
                this.class = 'fa-star-o'
                //   console.log(data)
              })
              .catch(err => {
                console.log(err)
              })
          }
        }
      }
    },
    created() {
      if (localStorage.getItem('accesstoken')) {
        this.bl = true
      } else {
        this.bk = false
      }
      this.acc.topic_id = this.$route.params.countentid
      this.acc.accesstoken = localStorage.getItem('accesstoken')
      this.axios.get(`http://www.vue-js.com/api/v1/topic/${this.$route.params.countentid}`)
        .then(data => {
          this.countent = data.data.data
          if (this.countent.replies.length == 0) {
            this.ke = false
          } else {
            this.ke = true
          }
          //   console.log(data.data.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }

</script>
<style scoped>
  .topics {
    padding: 0 10px;
  }
  
  .title {
    margin-top: 10px;
    text-align: center;
  }
  
  .content {
    padding: 50px 10px 0 10px;
    text-indent: 2em;
  }
  
  .countent {
    font-size: 0.5rem;
  }
  
  .content {
    word-break: break-all;
  }
  
  .green {
    padding: 5px;
    border-radius: 7px;
    background-color: green;
    color: white
  }
  
  .user {
    border: 1px solid #ccc;
    text-align: center;
    float: left;
  }
  
  .user header {
    text-align: left;
    height: 20px;
    background-color: #f6f6f6;
  }
  
  .user img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
  }
  
  .replies {
    margin-bottom: 44px;
  }
  
  .replies-header {
    padding: 5px 15px;
    font-size: .6rem;
    font-weight: bold;
    color: grey;
    background-color: #f6f6f6;
    margin-top: 30px;
  }
  
  .lou {
    color: darkturquoise;
  }
  
  .not {
    text-align: center;
    padding: 10px;
    font-size: .6rem;
  }
  
  .collect {
    float: right;
    font-size: .4rem;
    color: green;
  }

</style>
